import React from 'react'
import PropTypes from 'prop-types'
import {
  StyleSheet,
  Text,
  View,
  TextInput
} from 'react-native'
import { ONE_PIXEL } from '@/utils/ScreenUtil'
import { ScaleS, ScaleT } from 'src/utils/ScreenUtil'
export default class BorderInput extends React.PureComponent {
  static propTypes = {
    title: PropTypes.string,
    value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
    placeHolder: PropTypes.string,
    onPress: PropTypes.func,
    params: PropTypes.any,
    last: PropTypes.bool,
    children: PropTypes.node,
    style: PropTypes.object
  }

  constructor (props) {
    super(props)
    let { value, unit } = this.props
    value = value || ''
    this.state = {
      value: value && unit ? `${value}${unit}` : value,
      count: value.length
    }
  }

  getSnapshotBeforeUpdate (prevProps, prevState) {
    console.log('getSnapshotBeforeUpdate', prevProps, this.props)
    if (prevProps.value !== this.props.value) {
      let { value, unit } = this.props
      value = value || ''
      this.setState({
        value: value && unit ? `${value}${unit}` : value,
        count: value.length
      })
    }
    return null
  }

  render () {
    const {
      style, placeholder, keyboardType, maxLength, editable
    } = this.props
    const {
      value, count
    } = this.state
    return (
      <View style={[styles.container, style]} >
        <TextInput
          style={styles.textInput}
          value={value}
          placeholder={placeholder}
          selectionColor="#FED201"
          placeholderTextColor='#CCCCCC'
          keyboardType={keyboardType}
          clearButtonMode="while-editing"
          editable={editable}
          onChange={this._onChange}
          onFocus={this._onFocus}
          onBlur={this._onBlur}
        />
        {maxLength && <Text style={styles.length}>{count}/{maxLength}</Text>}
      </View>
    )
  }

  _onFocus = () => {
    const { value } = this.state
    const { unit } = this.props
    this.setState({
      value: value.replace(RegExp(unit), '')
    })
  }

  _onBlur = () => {
    const { value } = this.state
    const { unit, onChangeText, params } = this.props
    if (value && unit) {
      this.setState({
        value: `${value}${unit}`
      })
    }
    onChangeText && onChangeText(value, params)
  }

  _onChange = ({ nativeEvent: { pinyin = '', text: value } }) => {
    console.log('nativeEvent', 'pinyin', pinyin, '\neditValue', value)
    const {
      maxLength
    } = this.props
    if (maxLength && pinyin === '') {
      if (value.length > maxLength) {
        value = value.substr(0, maxLength)
      }
      this.setState({
        value,
        count: value.length
      })
    } else {
      this.setState({
        value
      })
    }
  }
}
BorderInput.defaultProps = {
  keyboardType: 'default',
  editable: true
}
BorderInput.propTypes = {
  style: PropTypes.object,
  value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
  placeholder: PropTypes.string,
  unit: PropTypes.string,
  maxLength: PropTypes.number,
  keyboardType: PropTypes.string,
  editable: PropTypes.bool,
  onChangeText: PropTypes.func
}
const styles = StyleSheet.create({
  container: {
    width: '100%',
    height: ScaleS(44),
    paddingHorizontal: ScaleS(10),
    borderColor: '#979797',
    borderStyle: 'solid',
    borderWidth: ONE_PIXEL,
    flexDirection: 'row',
    alignItems: 'center'
  },
  textInput: {
    flex: 1,
    height: '100%',
    fontSize: ScaleT(14),
    color: '#444444',
    fontWeight: '400'
  },
  length: {
    fontSize: ScaleT(11),
    color: '#CCCCCC',
    fontWeight: '400'
  }
})
